<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>文件上传和下载</title>
    <style>
        #btn-upload {
            display: inline-block;
            width: 100px;
            height: 50px;
        }
    </style>
</head>

<body>
    <input type="file" name="" id="files" placeholder="请选择要上传的文件">
    <button id="btn-upload">上传</button>
    <!-- 进度条 -->
    <div class="progress" style="width: 400px;">
        <div class="progress-bar progress-bar-striped " role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%" id="uploadpg">
            <span>0%</span>
        </div>
    </div>
  	   <!-- 文件下载：请求直接挂载到a标签的href引用中 --> 
    <a href="http://192.168.137.1:8024/download/download">点击下载</a>
    <script>
        // 加载事件
        $(function() {
            // 按钮的点击事件
            $("#btn-upload").on("click", function() {
                // 将jquery对象转换为dom对象，并获取file表单域中的文件数组
                var files = $("#files")[0].files;
                if (files.length <= 0) {
                    return alert("请选择上传的文件");
                }
                // 创建formdata对象=》上传文件必须用
                var formData = new FormData();
                formData.append("avatar", files[0]);
                // 使用BOM提供的XMLHttpRequest对象创建ajax请求对象
                const xhr = new XMLHttpRequest();
                xhr.upload.onprogress = function(e) {
                    if (e.lengthComputable) {
                       // loaded:已上传的文件长度
                        // total：需要传输的源文件长度
                      	// 计算上传进度
                        var percent = Math.ceil((e.loaded / e.total) * 100);
                      	// 设置HTML元素的宽度
                        $("#uploadpg").css("width", percent + "%");
                      	// 设置HTML元素的文本
                        $("#uploadpg span").text(percent + "%");
                      	// 如果上传进度===100
                        if (percent === 100) {
                          	// 则清除该HTML元素的类名，其实就是清除这个动画
                            $("#uploadpg").removeClass("active");
                        }
                    }
                }

                // 设置请求方式和请求地址
                xhr.open("POST", "http://192.168.137.1:8024/upload/upload");
               	// 设置请求头部的内容类型，使服务器可解析FormData格式数据
                   
                   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");
                xhr.setRequestHeader("Content-Type", "multipart/form-data");
                // 传递参数
                xhr.send(formData);
                // 监听ajax请求的状态
                xhr.onreadystatechange = function() {
                    // 如果本次请求是客户端向服务器发起的最后一次请求，并且响应成功，证明本次的ajax请求真正完成
                    if (xhr.readyState === 4 && xhr.status == 200) {
                        // xhr.responseText会将服务器返回的数据转化为json字符串
                        // 所以要想使用返回对象中的数据则必须转换为json对象
                        var data = JSON.parse(xhr.responseText);
                        // 判断服务器响应的状态，1代表失败，0代成功
                        if (data.status === 0) {
                            status = 0;
                        }
                    }
                }
            });
        });
    </script>
</body>

</html>
